 <template>
  <!-- 一条文章单元格 -->
  <van-cell @click="$router.push(`/article?art_id=${artObj.art_id}`)">
    <!-- 标题区域的插槽 -->
    <template #title>
      <div class="title-box">
        <!-- 标题 -->
        <span>{{ artObj.title }}</span>
        <!-- 单图 -->
        <img
          v-if="artObj.cover.type === 1"
          class="thumb"
          :src="artObj.cover.images[0]" />
      </div>
      <!-- 多张图片 -->
      <div class="thumb-box" v-if="artObj.cover.type > 1">
        <img
          v-for="(imgUrl, idx) in artObj.cover.images"
          :key="idx"
          class="thumb"
          :src="imgUrl" />
      </div>
    </template>
    <!-- label 区域的插槽 -->
    <template #label>
      <div class="label-box">
        <div>
          <span>作者 {{ artObj.aut_name }}</span>
          <span>{{ artObj.comm_count }} 评论</span>
          <span>发布日期 {{ artObj.pubdate }}</span>
        </div>
        <!-- 反馈按钮 -->
        <van-icon name="cross" @click="show1 = true" v-if="showCross"/>
        <!-- 一级反馈面板 -->
        <van-action-sheet
          v-model="show1"
          :actions="actions1"
          @select="onSelectFn"
          get-container="body"
          cancel-text="取消"
          />
         <!-- 二级反馈面板 -->
        <van-action-sheet
          v-model="show2"
          :actions="actions2"
          @select="onSelectFn"
          get-container="body"
          cancel-text="取消"
          />
        <!-- 反馈其他内容的对话框 -->
        <van-dialog
          v-model="show3"
          title="反馈内容"
          get-container="body"
          show-cancel-button
          :before-close="onBeforeCloseFn"
          >
          <van-field
            v-jujiao
            v-model.trim="msg"
            type="textarea"
            placeholder="请输入反馈内容"
            />
        </van-dialog>
      </div>
    </template>
  </van-cell>
</template>

<script>
import { ACTIONS1, ACTIONS2 } from '@/constant'
import { articleDislikeAPI, articleReportsAPI } from '@/api/home'
import { Toast } from 'vant'
export default {
  name: 'ArticleItem',
  props: {
    showCross: {
      type: Boolean,
      default: false
    },
    // 父传子 的 文章对象
    artObj: {
      type: Object,
      required: true
    },
    // 父传子 的 文章在数组中下标
    idx: Number
  },
  data () {
    return {
      show1: false, // 控制一级反馈面板的可见性
      show2: false, // 控制二级反馈面板的可见性
      actions1: ACTIONS1, // 一级反馈面板的数据列表
      actions2: ACTIONS2, // 二级反馈面板的数据列表
      show3: false, // 控制对话框的可见性
      msg: '' // 收集输入的值
    }
  },
  methods: {
    // 弹窗关闭前的回调函数
    async onBeforeCloseFn (action, done) {
      // action表示动作：cancel 或 confirm
      // done: 函数，决定弹窗是否关闭
      if (action === 'confirm') { // 确认
        // 需要判断输入框的值是否为空，
        if (this.msg.length === 0) {
          // 1. 为空，不发请求，继续输入
          Toast('请输入内容')
          done(false)
        } else {
          // 2. 不为空、发请求
          try {
            await articleReportsAPI({
              artId: this.artObj.art_id,
              type: '0',
              remark: this.msg
            })
            Toast.success('举报成功！')
            // 手动关闭弹窗
            this.show3 = false
          } catch (e) {
            Toast.fail('举报出错！')
          }
        }
      } else {
        done()
      }
    },
    // 点击反馈面板的选项时触发
    async onSelectFn (action) {
      const { id, name } = action
      if (id === 12) { // 反馈垃圾内容
        // 显示二级反馈面板
        this.show2 = true
      } else if (id === 11) { // 不感兴趣
        // 1. 调用接口，让后台删除
        try {
          await articleDislikeAPI({
            artId: this.artObj.art_id
          })
          // 2. 从vue变量中删除 - 子传父
          this.$emit('del-art', this.idx)
          Toast.success('反馈成功！')
        } catch (e) {
          Toast.fail('反馈错误！')
        } finally {
          this.show1 = false
        }
      } else if (id === 13) { // 拉黑作者
      } else { // 代码执行到这里，说明点击的二级反馈 - 举报功能
        if (id === 0) { // 其它问题
          // 弹出层的对话框组件显示
          this.show3 = true
          // 一级、二级反馈面板需要隐藏
          this.show1 = this.show2 = false
        } else {
          try {
            // 调用举报接口
            await articleReportsAPI({
              artId: this.artObj.art_id,
              // 如果 type = 0，需要让用户填写具体原因，给后台传过去
              type: id + '',
              remark: name
            })
            Toast.success('举报成功！')
          } catch (e) {
            Toast.fail('举报出错！')
          }
        }
      }
    }
  }
}
</script>

<style scoped lang="less">
/* 标题样式 */
.title-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* label描述样式 */
.label-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 文章信息span */
.label-box span{
  margin: 0 3px;
  &:first-child{
    margin-left: 0;
  }
}

/* 图片的样式, 矩形黄金比例：0.618 */
.thumb {
  width: 113px;
  height: 70px;
  background-color: #f8f8f8;
  object-fit: cover;
}

/* 三图, 图片容器 */
.thumb-box {
  display: flex;
  justify-content: space-between;
}
</style>
